<template>
    <div>
        <el-card>
            <h1 slot="header">{{ `交流申请${mode == 'VIEW' ? '查看' : '审批'}` }}</h1>
            <h2>{{$t('schoolAdministration.essentialInformation')}}</h2>
            <el-form label-suffix="：" label-position="right" label-width="150px">
                <el-row>
                    <el-col span="8">
                        <el-form-item :label="$t('schoolAdministration.fullName')">{{ studentInfo.studentName }}</el-form-item>
                    </el-col>
                    <el-col span="8">
                        <el-form-item :label="$t('schoolAdministration.studentNumber')">{{ studentInfo.studentId }}</el-form-item>
                    </el-col>
                    <el-col span="8">
                        <el-form-item :label="$t('schoolAdministration.college')">{{ studentInfo.facultyI18n }}</el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col span="8">
                        <el-form-item :label="$t('schoolAdministration.major')">
                            {{ studentInfo.professionI18n }}
                        </el-form-item>
                    </el-col>
                </el-row>
                <h2>{{$t('schoolAdministration.exchangeDetails')}}</h2>
                <el-row>
                    <el-col span="8">
                        <el-form-item :label="$t('exchangeApproval.exchangeName')">
                            {{ detail.exchangesName }}
                        </el-form-item>
                    </el-col>
                    <el-col span="8">
                        <el-form-item :label="$t('exchangeApproval.schoolName')">
                            {{ detail.exchangesUniversityName }}
                        </el-form-item>
                    </el-col>
                    <el-col span="8">
                        <el-form-item :label="$t('exchangeApproval.exchangesCountry')">
                            {{ detail.exchangesCountryI18n }}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col span="8">
                        <el-form-item :label="$t('exchangeApproval.natureOfCommunication')">
                            {{ detail.exchangesNatureI18n }}
                        </el-form-item>
                    </el-col>
                    <el-col span="8">
                        <el-form-item :label="$t('exchangeApproval.startTime')">
                            {{ detail.exchangesStartTime }}
                        </el-form-item>
                    </el-col>
                    <el-col span="8">
                        <el-form-item :label="$t('exchangeApproval.endTime')">
                            {{ detail.exchangesEndTime }}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item :label="$t('exchangeApproval.exchangeSchedule')">
                    <template
                        v-for="(item, index) in detail.attachmentCategoryDTO[
                            'exchangeCourseScheduleList'
                        ]"
                    >
                        <el-button type="text" :key="index" @click="downLoad(item)">
                            {{ item.name }}
                        </el-button>
                    </template>
                </el-form-item>
                <el-form-item :label="$t('exchangeApproval.schoolApproval')">
                    <template
                        v-for="(item, index) in detail.attachmentCategoryDTO[
                            'schoolCertificateList'
                        ]"
                    >
                        <el-button type="text" :key="index" @click="downLoad(item)">
                            {{ item.name }}
                        </el-button>
                    </template>
                </el-form-item>
                <el-form-item :label="$t('schoolAdministration.other')">
                    <template
                        v-for="(item, index) in detail.attachmentCategoryDTO['otherAttachList']"
                    >
                        <el-button type="text" :key="index" @click="downLoad(item)">
                            {{ item.name }}
                        </el-button>
                    </template>
                </el-form-item>
            </el-form>

            <el-form
                label-suffix="："
                label-position="right"
                label-width="100px"
                ref="audit"
                :model="approvalInfo"
            >
                <template v-if="mode == 'AUDIT'">
                    <h2>{{$t('schoolAdministration.auditOpinion')}}</h2>
                    <el-form-item :label="$t('schoolAdministration.auditOpinion')" prop="content">
                        <el-input
                            type="textarea"
                            :rows="4"
                            resize="none"
                            v-model="approvalInfo.content"
                        ></el-input>
                    </el-form-item>
                    <div style="text-align:right">
                        <el-button type="danger" @click="handleClickAudit('DOWN')">{{$t('schoolAdministration.reject')}}</el-button>
                        <el-button type="primary" @click="handleClickAudit('BY')">{{$t('schoolAdministration.adopt')}}</el-button>
                    </div>
                </template>
            </el-form>
        </el-card>
        <!-- 审批进度 -->
        <el-card shadow="never">
            <h2 class="title">{{$t('schoolAdministration.approvalProgress')}}</h2>
            <edu-table :order="false" :pagination="false" :selection="false" :data="auditList">
                <el-table-column :label="$t('schoolAdministration.time')">
                    <template slot-scope="scope">
                        {{ scope.row.time | formatDate }}
                    </template>
                </el-table-column>
                <el-table-column :label="$t('schoolAdministration.approvedBy')" prop="approvorName"></el-table-column>
                <el-table-column :label="$t('schoolAdministration.role')" prop="role"></el-table-column>
                <el-table-column prop="result" :label="$t('schoolAdministration.approvalResults')" width="120">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.result == 'COMMIT'" type="success">{{$t('schoolAdministration.submit')}}</el-tag>
                        <el-tag v-if="scope.row.result == 'Process'" type="success">{{$t('schoolAdministration.adopt')}}</el-tag>
                        <el-tag v-if="scope.row.result == 'End'" type="info">{{$t('schoolAdministration.finished')}}</el-tag>
                        <el-tag v-if="scope.row.result == 'Reject'" type="warning">{{$t('schoolAdministration.rejected')}}</el-tag>
                        <el-tag v-if="scope.row.result == 'Recall'" type="warning">{{$t('schoolAdministration.withdraw')}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    :label="$t('schoolAdministration.explain')"
                    prop="content"
                    show-overflow-tooltip
                ></el-table-column>
            </edu-table>
        </el-card>
    </div>
</template>

<script>
import { downloadfile } from 'common/src/api/upload'
import filters from 'common/src/filters'
import { selectApproFlow, approvalThrough, approvalReject } from 'common/src/api/approval'
import * as API from 'common/src/api/abnormalType/abnormal'
import { queryStuInfo } from 'common/src/api/internationalExchanges/exchangeApproval'
import {queryApplyInfoById} from 'common/src/api/internationalExchanges/exchangeApplication'
import { mapActions } from 'vuex'
export default {
    props: ['publicInfo'],
    filters: {
        formatDate(date) {
            return filters.formatDate(date, 'yyyy/MM/dd hh:mm:ss')
        }
    },
    data() {
        return {
            mode: '', //VIEW:查看；AUDIT:审核
            studentInfo: {
                studentId: '',
                studentName: '',
                facultyI18n: '',
                professionI18n: ''
            },
            detail: {
                exchangesName: '',
                exchangesUniversityName: '',
                exchangesCountryI18n: '',
                exchangesNatureI18n: '',
                exchangesStartTime: '',
                exchangesEndTime: '',
                attachmentCategoryDTO: {}
            },
            approvalInfo: {
                uid: '',
                no: '',
                content: '',
                approveAttachment: []
            },
            auditList: []
        }
    },
    mounted() {
        if (this.publicInfo && this.publicInfo.no) {
            this.getInfo();
            return;
        }
        let params = this.$route.params
        if (!params.mode) return
        this.mode = params.mode
        this.queryStudentInfo(params.data.studentId)
        this.convertDetail(params.data)
        params.data.workflowNo && this.getDetails(params.data.workflowNo)
    },
    methods: {
        ...mapActions(['delTab']),
        getInfo() {
            let content, {applicantId, no, listApproveHistory, isApproveShow} = this.publicInfo;
            try {
                content  = JSON.parse(this.publicInfo.content);
            }catch(error){
                content = this.publicInfo.content;
            }
            this.mode = !isApproveShow ? 'AUDIT' : 'VIEW';
            this.queryStudentInfo(content.studentId);
            this.queryTableList(content.id);
            this.approvalInfo.uid = applicantId;
            this.approvalInfo.no = no;
            this.auditList = listApproveHistory;
        },
        async queryTableList(id) {
            let params = {
                id
            };
            let { code, data } = await queryApplyInfoById(params);
            if (code !== 200) return;
            let row = data && data[0];
            this.convertDetail(row);
        },
        async queryStudentInfo(id) {
            let { code, data } = await queryStuInfo({ studentId: id })
            if (code !== 200) return
            for (let key in this.studentInfo) {
                this.studentInfo[key] = data[key]
            }
        },
        async getDetails(id) {
            let { code, data } = await selectApproFlow(id)
            if (!code == 200) return
            let cont = data.content ? JSON.parse(data.content) : {}
            if (!cont) return
            //保存审核参数
            this.approvalInfo.uid = data.applicantId
            this.approvalInfo.no = data.no
            this.auditList = data && data.listApproveHistory
        },
        async submitAudit(fn, mode) {
            let { code, data } = await fn
            if (code !== 200) return
            this.$message({
                type: 'success',
                message: mode == 'BY' ? '审批通过成功' : '审批驳回成功'
            })
            this.$store.commit('delete_tabs', this.$route.path)
            this.$router.go(-1)
        },
        convertDetail(data) {
            for (let key in this.detail) {
                if (key == 'exchangesUniversityName') {
                    this.detail[key] =
                        this.$store.getters.language == 'cn'
                            ? data['exchangesUniversityNameZH']
                            : data['exchangesUniversityNameEN']
                } else {
                    this.detail[key] = data[key]
                }
            }
        },
        handleClickAudit(mode) {
            switch (mode) {
                case 'BY':
                    this.submitAudit(approvalThrough(this.approvalInfo), mode)
                    break
                case 'DOWN':
                    if (!this.approvalInfo.content) {
                        this.$message({
                            type: 'warning',
                            message: '请填写驳回意见'
                        })
                        return
                    }
                    this.submitAudit(approvalReject(this.approvalInfo), mode)
                    break
            }
        },
        downLoad(item) {
            downloadfile(item.url)
        }
    },
    beforeRouteLeave(to,from,next){
        this.delTab(this.$route.path);
        next();
    }
    
}
</script>

<style>
</style>
